<template>
  <el-dialog
    :model-value="dialogVisible"
    title="绑定用户信息"
    @close="$emit('close')"
    width="700px"
  >
    <el-table-v2
      :columns="infoOptions.columns"
      :data="infoOptions.data"
      :width="670"
      :height="300"
      fixed
    />
    <template #footer>
      <el-button @click="$emit('close')">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx">
const emit = defineEmits(['close'])
const props = defineProps({
  id: {
    type: String || Number,
    default: null
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
import { viewUserInfo } from '@/api/system/role'
const infoOptions = reactive({
  columns: [
    { title: '员工编号', key: 'username', dataKey: 'username', width: 220 },
    { title: '员工姓名', key: 'nickname', dataKey: 'nickname', width: 220 },
    {
      title: '状态',
      key: 'status',
      dataKey: 'status',
      cellRenderer(data) {
        return (
          <>
            <span>{data == 0 ? '关闭' : '开启'}</span>
          </>
        )
      },
      width: 220
    }
  ],
  data: []
})
const fetchData = async () => {
  const data = await viewUserInfo(props.id)
  infoOptions.data = data
}
onMounted(() => {
  fetchData()
})
</script>

<style lang="scss" scoped></style>
